<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线书城-全世界最大书城-地址管理</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/commons.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2466032_1guctssow9r.css">
    <script src="js/jquery.min.js"></script>
    <style>
        .hotpro{
            position: relative;
            height: 510px;
            top:75px;
        }
        .hotpro .main .left{
            float: left;
            width: 50px;
            height: 500px;
        }
        .hotpro .mian .left ul{
            height: 300px;
        }
        .hotpro .main .left .title{
            font-weight: bold;
            font-size: 18px;
        }
        .hotpro .main .left ul li{
            font-size: 18px;
            line-height: 50px;
            width: 120px;
            height: 50px;
            text-align: center;
        }
        .hotpro .main  .right .right_top h4{
            margin-left: 20px;
        }
        .hotpro .main .right .right_top .right_order *{
            line-height: 30px;
        }
        .hotpro .main .right .right_content{
            margin-top: 4px;
            margin-left: 150px;
            border:1px solid #999999;
        }
        .hotpro .main .right .right_content table{
            text-align: center;
        }
        .hotpro .main .right .right_content button{
            position:absolute;
            width: 60px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 17px;
            color: chocolate;
            right: 51px;
        }
        #addAddress,#replayAddress{
            display: none;
            position: absolute;
            width: 800px;
            height: 300px;
            border:1px solid black;
            background-color: #D6F2F5;
            top:100px;
            left: 250px;
        }
        #addAddress p,#replayAddress p{
            display: inline;
            font-size: 20px;
            font-weight: bold;
        }
        #addAddress input,#replayAddress input{
            line-height: 20px;
            margin-top: 10px;
        }
        #addAddress label,#replayAddress label{
            display: inline-block;
            width: 300px;
            text-align: right;
            margin-left: 180px;
        }
        #addAddress button,#replayAddress button{
            margin-top: 20px;
            width: 100px;
            font-size: 20px;
            font-weight: bold;
            height: 40px;
            margin-left: 345px;
        }
        #addAddress h3 button:nth-of-type(1),#replayAddress h3 button:nth-of-type(1){
            top: -18px;
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            right: 0px;
        }
    </style>
</head>
<body>
<!-- 头部开始 -->
<div class="header flux clearfix">
    <div class="container">
        <h1 class="logo l">
            <img src="./images/logo.jpeg" alt="">
        </h1>
        <ul class="shortcut">
            <li>
                <img src="./images/addr.png" alt="">
                北京
                <img src="./images/xia.png" alt="">
            </li>
            <li onclick="window.location.href='index.html'" class="index">首页</li>
            <li class="classify" onclick="location.href='classify.html'">分类</li>
            <li>
                <img src="./images/search.png" alt="">
                <input id="text_search" type="text" placeholder="搜索图书、课堂、文艺类">
                <button id="btn_search">搜索</button>
                <script>
                    $(function () {
                        $("#text_search").val(sessionStorage.getItem("name"));
                    });
                    $("#btn_search").click(function () {
                        let name=$("#text_search").val();
                        sessionStorage.setItem("name",name);
                        location.href="search.html";
                    })
                </script>
            </li>
            <li>
                <img src="./images/user.png" alt="">
                <span  id="toLogin" onclick="window.location.href='login.html'">登录</span>
            </li>
            <li>
                <img src="./images/phone.png" alt="">
                <span id="register" onclick="location.href='regist.html'">注册</span>
            </li>
            <li>
                <div class="shopcart" onclick="window.location.href='./shopcart.html'">
                    <i class="iconfont icon-gouwuche" style="font-size:20px"></i>
                    <span>购物车</span>
                    <span id="shopNum"></span>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 头部结束 -->
<!-- 个人中心开始 -->
<div class="hotpro container">
    <div class="title clearfix">
        <div class="first-title l">会</div>
        <div class="second-title l">员中心</div>
    </div>
    <div class="main clearfix">
        <div class="left">
            <ul>
                <li class="title">交易记录</li>
                <li><a href="myOrder.html">我的订单</a></li>
                <li class="title">个人设置</li>
                <li><a href="#" style="color: cornflowerblue">地址管理</a></li>
                <li><a href="#">修改头像</a></li>
                <li><a href="#">修改密码</a></li>
            </ul>
        </div>
        <div class="right">
            <div class="right_content">
                <h3 class="title" style="text-align: center">我的地址<button onclick="toAddAddress()">添加</button></h3>
                <table id="addressMe" width="100%">
                    <tr class="title">
                        <th>收货人</th>
                        <th>电话</th>
                        <th>地址</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div><!--right end-->
    </div>
    <div id="addAddress">
        <h3 class="title" style="text-align: center">添加地址<button onclick="X1()">X</button></h3>
        <label for="username">
            <p>收货人：</p><input type="text" id="username" ></label><br>
        <label for="telphone">
            <p>电话号码：</p><input type="text" id="telphone"></label><br>
        <label for="province">
            <p>省：</p><input type="text" id="province"></label><br>
        <label for="city">
            <p>市：</p><input type="text" id="city"></label><br>
        <label for="area">
            <p> 区：</p><input type="text" id="area"></label><br>
        <label for="address">
            <p> 详细地址：</p><input type="text" id="address"></label><br>
        <button id="toAddAddress" onclick="addressTo()" class="title">确定</button>
    </div>
    <div id="replayAddress">
        <h3 class="title" style="text-align: center">修改地址<button onclick="X2()">X</button></h3>
        <label for="username1">
            <p>收货人：</p><input type="text" id="username1" ></label><br>
        <label for="telphone2">
            <p>电话号码：</p><input type="text" id="telphone2"></label><br>
        <label for="province2">
            <p>省：</p><input type="text" id="province2"></label><br>
        <label for="city2">
            <p>市：</p><input type="text" id="city2"></label><br>
        <label for="area2">
            <p> 区：</p><input type="text" id="area2"></label><br>
        <label for="address2">
            <p> 详细地址：</p><input type="text" id="address2"></label><br>
        <button id="toRAddress" onclick="toRaAddress()" class="title">确定</button>
    </div>
</div>
<!-- 个人中心结束 -->
<!-- 底部栏开始 -->
<div class="footer flux">
    <div class="f1 container">
        <ul>
            <li>
                <div class="tb1"></div>
                <div class="tbc">品类齐全，轻松购物</div>
            </li>
            <li>
                <div class="tb2"></div>
                <div class="tbc">多仓直发，极速配送</div>
            </li>
            <li>
                <div class="tb3"></div>
                <div class="tbc">正品行货，精致服务</div>
            </li>
            <li>
                <div class="tb4"></div>
                <div class="tbc">天天低价，畅选无忧</div>
            </li>
        </ul>
    </div>
    <div class="operator"></div>
    <div class="f2 container">
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
        <div>
            <ul>
                <li>购物指南</li>
                <li>
                    <a href="#">购物流程</a>
                </li>
                <li>
                    <a href="#">会员介绍</a>
                </li>
                <li>
                    <a href="#">生活旅行/团购</a>
                </li>
                <li>
                    <a href="#">常见问题</a>
                </li>
                <li>
                    <a href="#">大家电</a>
                </li>
                <li>
                    <a href="#">联系客服</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="f3 container">
        <span>关于我们</span><span>|</span>
        <span>联系我们</span><span>|</span>
        <span>联系客服</span><span>|</span>
        <span>合作招商</span><span>|</span>
        <span>商家帮助</span><span>|</span>
        <span>营销中心</span><span>|</span>
        <span>English Site</span><span>|</span>
        <span>Media & IR</span>
    </div>
    <div class="f4 container">
        <span>Copyright &copy; 2020 - 2021  乐山LS.com 版权所有</span>
        <span>|</span>
        <span>消费者维权热线：4006067733经营证照</span>
        <span>|</span>
        <span>(川)网械平台备字(2020)第00004号</span>
        <span>|</span>
        <span>营业执照</span>
    </div>
</div>
<!-- 底部栏结束 -->
</body>
<script>
</script>
<script src="js/toLogin.js"></script>
<script>
    $.ajax({
        url:"address/byId",
        type:"get",
        datatype:"json",
        success:function (res) {
            let data=res.data;
            for(let i=0;i<data.length;i++){
                let tr=$("<tr></tr>");
                let td1=$("<td id='td1_"+data[i].id+"'></td>").text(data[i].accept);
                let td2=$("<td id='td2_"+data[i].id+"'></td>").text(data[i].telphone);
                let td3=$("<td id='td3_"+data[i].id+"'></td>").text(data[i].province+"-"+data[i].city+"-"+data[i].area+"-"+data[i].address);
                let td4=$("<td></td>");
                let a1=$("<a onclick='delAddress(this)' id='del_"+data[i].id+"'></a>").text(" 删除");
                let a2=$("<a onclick='reAddress(this)' id='re_"+data[i].id+"'></a>").text("修改 ");
                td4.append(a2,a1);
                tr.append(td1,td2,td3,td4);
                $("#addressMe").append(tr);
            }
        }
    });
    function toAddAddress() {
        document.getElementById("addAddress").style.display="block";
    }
    function X1() {
        document.getElementById("addAddress").style.display="none";
    }
    function X2() {
        document.getElementById("replayAddress").style.display="none";
    }
    function delAddress(obj) {
        let id=$(obj).attr("id").split("_")[1];
        $.ajax({
            url:"address/delAddress",
            type:"get",
            datatype:"json",
            data:{"id":id},
            success:function(){
                alert("删除成功");
                location.href="address.html";
            }
        })
    }
    function reAddress(obj) {
        document.getElementById("replayAddress").style.display="block";
        let id=$(obj).attr("id").split("_")[1];
        let accept=$("#td1_"+id).text();
        let telphone=$("#td2_"+id).text();
        let data=$("#td3_"+id).text().split("-");
        let province=data[0];
        let city=data[1];
        let area=data[2];
        let address=data[3];
        $("#username1").val(accept);
        $("#telphone2").val(telphone);
        $("#province2").val(province);
        $("#city2").val(city);
        $("#area2").val(area);
        $("#address2").val(address);
    }

    //提交修改
    function toRaAddress() {
        let accept=$("#username1").val();
        let telphone=$("#telphone2").val();
        let province=$("#province2").val();
        let city=$("#city2").val();
        let area=$("#area2").val();
        let address=$("#address2").val();
        $.ajax({
            url:"address/updateAddress",
            type:"get",
            datatype:"json",
            data:{
                "accept":accept,
                "telphone":telphone,
                "province":province,
                "city":city,
                "area":area,
                "address":address,
            },
            success:function () {
                alert("修改成功");
                location.href="address.html";
            }
        });
    }
    function addressTo() {
        let accept=$("#username").val();
        let telphone=$("#telphone").val();
        let province=$("#province").val();
        let city=$("#city").val();
        let area=$("#area").val();
        let address=$("#address").val();
        $.ajax({
            url:"address/addAddress",
            type:"get",
            datatype:"json",
            data:{
                "accept":accept,
                "telphone":telphone,
                "province":province,
                "city":city,
                "area":area,
                "address":address,
            },
            success:function (res) {
                if(res.code==200){
                    alert("添加成功");
                    location.href="address.html";
                }
            }
        })
    }
</script>
</html>